<template>
  <el-card>
    <el-select style="width: 300px" placeholder="请选择站点名称" v-model="value" filterable>
      <el-option v-for="item in options" :key="item.id" :value="item.name" :label="item.name"></el-option>
    </el-select>
  </el-card>
  <el-card class="mt">
    <el-radio-group size="large" v-model="radio" @change="handleChange" :disabled="dataList.length == 0">
      <el-radio-button :label="`全部(${allCount})`" :value="0" />
      <el-radio-button :label="`空闲中(${checkCount(1)})`" :value="1" />
      <el-radio-button :label="`充电中(${checkCount(2)})`" :value="2" />
      <el-radio-button :label="`连接中(${checkCount(3)})`" :value="3" />
      <el-radio-button :label="`排队中(${checkCount(4)})`" :value="4" />
      <el-radio-button :label="`已预约(${checkCount(5)})`" :value="5" />
      <el-radio-button :label="`故障/离线(${checkCount(6)})`" :value="6" />
    </el-radio-group>
  </el-card>
  <el-card class="mt" v-if="dataList.length">
    <el-row :gutter="20">
      <el-col :span="6" v-for="item in dataListCopy" :key="item.id">
        <div class="item">
          <div class="pic">
            <p v-if="item.status == 1">空闲中</p>
            <p v-if="item.status == 2">充电中</p>
            <p v-if="item.status == 3">连接中</p>
            <p v-if="item.status == 4">排队中</p>
            <p v-if="item.status == 5">已预约</p>
            <p v-if="item.status == 6">故障/离线</p>
            <img :src="item.status == 1 ? free : (item.status == 6 ? outline : ing)" width="100px">
            <p v-if="item.status == 2">{{ item.percent }}</p>
            <p v-else></p>
          </div>
          <div class="info">
            <h3>{{ item.id }}</h3>
            <hr class="mb">
            <p>电压：{{ item.voltage }}</p>
            <p>电流：{{ item.current }}</p>
            <p>功率：{{ item.power }}</p>
            <p>温度：{{ item.tem }}</p>
        </div>
        </div>
        <div class="btn">
          <div class="divder">
            <div>
              <p class="fl ml" style="font-size:12px ;color:#999">暂无预警</p>
              <div class="fr" style="text-align: right;">
                <el-button size="small">维保记录</el-button>

                <el-popover placement="right" :width="300" trigger="hover">
                  <template #reference>
                    <el-button size="small" type="primary" class="mr">使用记录</el-button>
                  </template>
                  <h3 class="mb">使用记录</h3>
                  <el-timeline style="max-width: 600px">
                    <el-timeline-item :timestamp="j.time" v-for="j in item.record" :key="j.time" :hollow="true"
                      type="primary">
                      {{ j.msg }}
                    </el-timeline-item>
                  </el-timeline>
                </el-popover>

              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </el-card>
  <el-card class="mt empty-card" v-else>
  <el-result
    icon="info-filled"
    title="请先选择站点名称"
    sub-title="您需要先在上方选择站点才能查看详细信息"
  >
  </el-result>
</el-card>
</template>

<script lang="ts" setup>
import free from '@/assets/free.png'
import outline from "@/assets/outline.png";
import ing from "@/assets/ing.png"
import { currentListApi } from '@/api/chargingstation';
import { computed, onMounted, ref, watch } from 'vue';

const options = ref<any>([])
const dataList = ref<any>([])
const dataListCopy = ref<any>([])
const loadData = async () => {
  const { data } = await currentListApi()
  options.value = data
  // dataList.value = data[0].list
  // dataListCopy.value = data[0].list
}

onMounted(() => {
  loadData()
})

const value = ref("")
const radio = ref(0)

watch(value, () => {
  const res = options.value.filter((item: any) => item.name === value.value)
  console.log(res);
  
  dataListCopy.value = res[0].list
  dataList.value = res[0].list
  radio.value = 0
})

function checkCount(num: number) {
  return dataList.value.filter((item: any) => item.status === num).length
}
const allCount = computed(() =>
  checkCount(1) + checkCount(2) +
  checkCount(3) + checkCount(4) +
  checkCount(5) + checkCount(6)
)

const handleChange = () => {
  dataListCopy.value = dataList.value
  if (radio.value != 0) {
    dataListCopy.value = dataListCopy.value.filter((item: any) => item.status === radio.value)
  }
}
</script>

<style lang="less" scoped>
.item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background-color: rgb(247, 251, 254);
  padding: 20px;
  border-radius: 10px 10px 0 0;
  margin-top: 20px;

  .pic {
    p {
      width: 76px;
      text-align: center;
      margin-bottom: 10px;
      color: rgb(61, 187, 146);
    }
  }

  .info {
    color: #999;
    margin-left: 30px;
    line-height: 26px;
    margin-top: -10px;
  }
}

.btn {
  width: 100%;
  height: 50px;
  line-height: 50px;
  background-color: #f7fbfe;

  .divder {
    background-color: #f4f4f4;
    height: 2px;
    width: 95%;
    margin: auto;
  }
}
.empty-card {
  :deep(.el-card__body) {
    padding: 40px 20px;
  }

  .el-result {
    padding: 20px 0;
    
    :deep(.el-result__icon) {
      svg {
        width: 80px;
        height: 80px;
        color: var(--el-color-info);
      }
    }

    :deep(.el-result__title) {
      margin-top: 10px;
      font-size: 18px;
      color: var(--el-text-color-primary);
    }

    :deep(.el-result__subtitle) {
      margin-top: 8px;
      font-size: 14px;
      color: var(--el-text-color-secondary);
    }

    .el-button {
      margin-top: 20px;
      padding: 12px 24px;
      font-size: 14px;
    }
  }
}
</style>